<!--
这个文件定义了一个名为 `Weather` 的 Vue 组件，用于显示天气信息。
组件包含以下部分：
- template: 使用 `el-card` 组件作为容器，包含一个标题为 "天气" 的头部和一个显示天气信息的内容区域。
  - 内容区域显示天气、温度、风向、风力和湿度等信息，数据绑定到 `weather` 对象。
- script setup: 使用 Vue 3 的 `<script setup>` 语法，定义了以下内容：
  - `weather`: 一个包含天气信息的响应式对象。
  - `getWeather`: 一个用于获取天气信息的函数，使用 Axios 从后端服务获取数据。
  - `onMounted`: 在组件挂载时调用 `getWeather` 函数以获取天气信息。
-->

<template>
    <el-card class="weather-card">
        <template #header>
            <div class="card-header">
                <span>天气</span>
            </div>
        </template>
        <div>
            <div class="top-content">
                <div class="text-content">当前时间：{{ currentTime }}</div>
            </div>
            <div class="mid-content">
                <div class="mid-left-content">
                    <el-icon :size="iconSize">
                        <Sunny class="weather-icon" />
                    </el-icon>
                </div>
                <div class="mid-right-content">
                    <div class="text-content">当前天气</div>
                    <div class="text-content bold-text">{{ weather.weather }}</div>
                </div>
            </div>
            <div class="bottom-content">
                <div class="bottom-left-content">
                    <div class="text-content">温度</div>
                    <div class="text-content bold-text">{{ weather.temperature }}℃</div>
                </div>
                <div class="bottom-mid-content">
                    <div class="text-content">风向</div>
                    <div class="text-content bold-text">{{ weather.winddirection }}</div>
                </div>
                <div class="bottom-right-content">
                    <div class="text-content">风力</div>
                    <div class="text-content bold-text">{{ weather.windpower }}级</div>
                </div>
            </div>
            <!-- <p>天气: {{ weather.weather }}</p>
            <p>温度: {{ weather.temperature }}℃</p>
            <p>风向: {{ weather.winddirection }}</p>
            <p>风力: {{ weather.windpower }}级</p>
            <p>湿度: {{ weather.humidity }}%</p> -->
        </div>
    </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Sunny } from '@element-plus/icons-vue'
import axios from '@/services/axios.js'
import config from '@/config/weatherConfig.js'
import moment from 'moment'

const weather = ref({
    weather: '',
    temperature: '',
    winddirection: '',
    windpower: '',
    humidity: ''
})

const iconSize = '64'

function getWeather () {
    const apiKey = config.weatherApiKey
    const cityCode = config.cityCode
    axios.get(`https://restapi.amap.com/v3/weather/weatherInfo?key=${apiKey}&city=${cityCode}&extensions=base`, { noAuth: true })
        .then(response => {
            const data = response.data.lives[0]
            weather.value.weather = data.weather
            weather.value.temperature = data.temperature
            weather.value.winddirection = data.winddirection
            weather.value.windpower = data.windpower
            weather.value.humidity = data.humidity
        })
        .catch(error => {
            console.error(error)
        })
}

const currentTime = ref(moment().format('HH:mm:ss'))

function updateTime () {
    currentTime.value = moment().format('HH:mm:ss')
}

onMounted(() => {
    setInterval(updateTime, 1000)
    getWeather()
})
</script>

<style scoped>
.weather-card {
    border-radius: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.bold-text {
    font-weight: bold;
}

.top-content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32px;
    padding-top: 12px;
    border-bottom: 1px solid lightgray;
}

.mid-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px;
    border-bottom: 1px solid lightgray;
}

.mid-left-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
}

.mid-right-content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 50%;
    height: 64px;
}

.bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px;
}

.bottom-left-content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 33.33%;
    height: 64px;
    border-right: 1px solid lightgray;
}

.bottom-mid-content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 33.33%;
    height: 64px;
    border-right: 1px solid lightgray;
}

.bottom-right-content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 33.33%;
    height: 64px;
}
</style>